<template>
    <!--  上传相片功能 ----->
  
    <!--  删除和回显都放在组件内 接受imgUrl做回显 ----->
  
    <div class="uploadPhoto">
    <!-- <Spin fix v-if="photoListLoading"></Spin> -->
  
    <!-- <div class="image" v-if="imgUrls">
        <img :src="imgUrls" />
      </div> -->
   
      <div class="projectImage" v-if="imgUrls">
        <img :src="imgUrls" />
  
        <div class="editBackground" @click="getInputClick">
          <Icon type="md-create" color="#7033FF" />
  
          <div class="deleteImage">
            <Tooltip
              max-width="300"
              :transfer="true"
              placement="top"
              content="Are you sure you want to delete this Image?"
            >
              <Icon type="ios-close" @click.stop="deleteImage" />
            </Tooltip>
          </div>
        </div>
      </div>
  
      <Button
        v-show="!imgUrls"
        type="dashed"
        @click="getInputClick"
        class="img_btn"
      >
        <Icon type="md-add" size="30" class="iconStyle" />
      </Button>
  
      <input
        type="file"
        style="display: none"
        accept="*"
        ref="myInput"
        @change="fileChange"
      />
  
      <div class="uploadInfo" v-if="file && file.name && loading">
        <p>file: {{ file.name }}</p>

        <p>File uploading, please wait...</p>
  
        <Progress
          :percent="progressValue"
          :stroke-width="30"
          status="active"
          text-inside
        />
      </div>
    </div>
  </template>
<script>
import { client }  from '@/hooks/ALI_OSSCloud'
export default {
    props: {
    /** 用于回显接收 */
    imgUrls: {
        type: String,
        default: ''
    },
    fileName:{
      type:String,
      default:''
    }
  },
  data() {
    return {
        fileNames:"",
        progressValue:0,
        file:null,
        imageUrl:"",
        imageKey:"",
        loading:false,
    }
  },
  mounted(){
    console.log(this.imgUrls)
    console.log(this.fileName)
  },
  computed:{

  },
  methods:{
    // Delete image by fileName
    deleteImage(){
        client().useBucket("kai-zhang");
        client().delete(this.fileName).then(({res})=>{
           if(res.statusCode == 204){
                this.$Message.success("Delete Successfully !");
                this.$emit('DeleteSuccess')
           }
        })
    },
    getInputClick() {
      this.$refs.myInput.click();
    },
    fileChange(e) {
      const [file] = e.target.files;
      this.file = file;
      this.$emit("change-file", this.file);
      this.upload(this.file);
    },
    /**
     * @description: 图片上传OSS 
     * @param {*} formData : file 文件流
     * @return {*}
     */    
    upload(formData) {
      this.fileNames = 'image/'+'banner' + `${Date.parse(new Date())}` + '.jpg'; 
      client().multipartUpload(this.fileNames,formData,{progress:function(p){
        this.loading = true;
        this.progressValue = parseInt(p * 100);
        console.log(this.progressValue)
      }}).then(({res})=>{
          if(res.statusCode == 200){
            console.log("上传成功",res)
            this.imageKey = res.headers.etag
            this.loading = false
            this.imageUrl = 'https://kai-zhang.oss-cn-hangzhou.aliyuncs.com/' + this.fileNames;
            this.$Message.success("Upload Successfully !")
            this.$emit("UploadSuccess",{Image:this.imageUrl,fileName:this.fileNames});
            /** 请求成功将信息抛出 */
          }else{
            this.$Message.error("Upload faild !")
          }
        })   
    },
  },
}
</script>
<style scoped lang="less">
.uploadPhoto {
  display: flex;
  .image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
  }
  .img_btn {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    // border: 2px dashed white;
    .iconStyle {
      color: #1e80ff;
    }
  }
  .img_btn:hover{
    border: 2px dashed #1e80ff;
  }
  .uploadInfo {
    padding: 10px;
  }
}
.ivu-btn-dashed {
  background-color: #131e37 !important;
}
.projectImage {
  position: relative;
  width: 110px;
  height: 110px;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  &:hover {
    .editBackground {
      display: flex;
    }
  }
  .editBackground {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    padding: 20px;
    // background: #00000050;
    align-items: center;
    justify-content: center;
    display: none;
    .ivu-icon {
      font-size: 30px;
      display: block;
      &:hover {
        color: #fff !important;
        cursor: pointer;
      }
    }
    .deleteImage {
      position: absolute;
      right: 0px;
      top: 0;
      .ivu-icon {
        color: #7033ff;
        // background: rgba(0, 0, 0, 0.3);
      }
    }
  }
}
</style>
